<template>
  <div>
    <!-- <div class="bg_grey_all"></div> -->
    <van-row gutter="20" class="title_left">
      <van-col span="8" style="padding-top: 45px">
        <a @click="back" class="back_a" style="color: white; margin-left: 10px">
          返回
        </a>
      </van-col>
      <van-col
        span="8"
        style="text-align: center; color: white; padding-top: 45px"
        >用车申请</van-col
      >
      <van-col span="8"></van-col>
    </van-row>
    <van-row class="topMargin">
      <van-col span="24">
        <van-cell title="填写用车申请" class="bg_grey" />
        <van-form>
          <van-field label="申请人" :value="currentUser.name" readonly />
          <van-field label="申请车辆" :value="vehicle.plateNum" readonly />

          <van-field
            readonly
            clickable
            :value="useType"
            label="使用方式"
            placeholder="请选择使用方式"
            @click="show_useType_list = true"
          />
          <van-popup v-model="show_useType_list" position="bottom">
            <van-picker
              show-toolbar
              :columns="useType_list"
              @confirm="onUseTypeSelected"
              @cancel="show_useType_list = false"
            />
          </van-popup>

          <van-field
            readonly
            clickable
            :value="beginTime"
            label="开始时间"
            placeholder="点击选择开始用车时间"
            @click="showBeginTimePicker = true"
          />
          <van-popup v-model="showBeginTimePicker" position="bottom">
            <van-datetime-picker
              type="datetime"
              @confirm="onConfirmBeginTime"
              @cancel="showBeginTimePicker = false"
            />
          </van-popup>
          <van-field
            readonly
            clickable
            :value="endTime"
            label="结束时间"
            placeholder="点击选择介绍用车时间"
            @click="showEndTimePicker = true"
          />
          <van-popup v-model="showEndTimePicker" position="bottom">
            <van-datetime-picker
              type="datetime"
              @confirm="onConfirmEndTime"
              @cancel="showEndTimePicker = false"
            />
          </van-popup>

          <van-field
            autosize
            label="备注"
            type="textarea"
            maxlength="200"
            placeholder="请输入备注"
            show-word-limit
            v-model="useRecord.remark"
          />
        </van-form>
        <van-cell
          v-if="vehicle.vehicleType === 1"
          title="填写试驾客户信息"
          class="bg_grey"
        />
        <van-form v-if="vehicle.vehicleType === 1">
          <van-field
            label="客户姓名"
            placeholder="请输入客户姓名"
            v-model="useVehicleChild.gustName"
          />
          <van-field label="单选框">
            <template #input>
              <van-radio-group
                v-model="useVehicleChild.gustSex"
                direction="horizontal"
              >
                <van-radio name="1">男</van-radio>
                <van-radio name="2">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>

          <van-field label="步进器">
            <template #input>
              <van-stepper v-model="useVehicleChild.gustAge" />
            </template>
          </van-field>
          <van-field
            label="手机号"
            placeholder="请输入手机号"
            v-model="useVehicleChild.mobile"
          />
          <van-field
            label="驾驶证编号"
            placeholder="请输入驾驶证编号"
            v-model="useVehicleChild.driverLicense"
          />
          <van-field
            readonly
            clickable
            :value="roadFence"
            label="驾驶线路"
            placeholder="请选择线路"
            @click="show_roadFence_list = true"
          />
          <van-popup v-model="show_roadFence_list" position="bottom">
            <van-picker
              show-toolbar
              :columns="roadFence_list"
              @confirm="onRoadFenceSelected"
              @cancel="show_roadFence_list = false"
            />
          </van-popup>
          <van-field
            autosize
            label="备注"
            type="textarea"
            maxlength="200"
            placeholder="请输入备注"
            show-word-limit
            v-model="useVehicleChild.remark"
          />
        </van-form>
        <div style="margin: 16px">
          <van-button block type="primary" @click="commit">提交</van-button>
        </div>
      </van-col>
    </van-row>
  </div>
</template>

<script>
import { Api } from "../../../api/api_config";
import { Toast } from "vant";
import { UseRecord } from "../../../model/useRecord";

export default {
  data() {
    return {
      vehicle: {},
      currentUser: {},
      useRecord: {},
      useVehicleChild: {},
      useType: "",
      show_useType_list: false,
      useType_list: [],
      beginTime: "",
      showBeginTimePicker: false,
      endTime: "",
      showEndTimePicker: false,
      roadFence: "",
      roadFence_list: [],
      show_roadFence_list: false,
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    initData() {
      this.$store.state.tab_show = false;
      this.currentUser = this.$store.state.configuration.currentUser
      this.vehicle = this.$store.state.vehicle
      this.useRecord = new UseRecord()
      this.useVehicleChild = this.useRecord.useVehicleChild[0]
      this.useRecord.vehicleId = this.vehicle.id
      this.useRecord.companyId = this.currentUser.depId
      this.useRecord.driverName = this.currentUser.name
      this.useRecord.driverMobile = this.currentUser.phoneNumber
      // 指定recordType 若试驾车，为试驾，其他的为维修
      if (this.vehicle.vehicleType === 1) {
        this.useRecord.recordType = 2;
      } else {
        this.useRecord.recordType = 1;
      }

      this.beginTime = this.$moment(new Date()).format("YYYY年MM月DD日 h时mm分ss秒")
      this.endTime = this.$moment(new Date()).add(1, 'd').format("YYYY年MM月DD日 h时mm分ss秒")

      // 指定childType 小类对应关系
      if (this.vehicle.vehicleType === 1) {
        // 试驾
        this.useType_list.push({
          text: '试驾', id: 1
        })
        this.useType_list.push({
          text: '维保', id: 4
        })
        this.useType_list.push({
          text: '加油', id: 6
        })

        this.useType = '试驾'
        this.useRecord.childType = 1
      } else if (this.vehicle.vehicleType === 2) {
        // 客用
        this.useType_list.push({
          text: '客用', id: 2
        })
        this.useType_list.push({
          text: '维保', id: 4
        })
        this.useType_list.push({
          text: '加油', id: 6
        })

        this.useType = '客用'
        this.useRecord.childType = 2
      } else {
        // 
        this.useType_list.push({
          text: '救援', id: 3
        })
        this.useType_list.push({
          text: '维保', id: 4
        })
        this.useType_list.push({
          text: '挪车', id: 5
        })
        this.useType_list.push({
          text: '加油', id: 6
        })

        this.useType = '救援'
        this.useRecord.childType = 3
      }
      this.queryDriverLicense()
      this.queryFanceRule()
    },
    back() {
      this.$router.push("/carUsage")
    },
    onConfirmBeginTime(value) {
      this.beginTime = this.$moment(value).format("YYYY年MM月DD日 h时mm分ss秒")
      this.useRecord.planBeginTime = value
      this.showBeginTimePicker = false
    },
    onConfirmEndTime(value) {
      this.endTime = this.$moment(value).format("YYYY年MM月DD日 h时mm分ss秒")
      this.useRecord.planEndTime = value
      this.showEndTimePicker = false
    },
    onRoadFenceSelected(value) {
      this.roadFence = value.text
      this.useRecord.ruleId = value.id
      this.show_roadFence_list = false
    },
    onUseTypeSelected(value) {
      this.useType = value.text
      this.useRecord.childType = value.id
      this.show_useType_list = false
    },
    // 查询围栏路线
    queryFanceRule() {

      let that = this
      this.$axios({
        method: Api.FenceRule.fenceRule.method,
        url: Api.FenceRule.fenceRule.url + "?CompanyId=" + this.currentUser.depId,
      })
        .then(function (response) {          
          that.roadFence_list = that.addProp(
            response.data.items,
            "text",
            "name"
          );
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    queryDriverLicense() {

      let that = this
      // 获取驾驶证数据
      this.$axios({
        method: Api.certification.certification.method,
        url: Api.certification.certification.url + "?UserId=" + this.currentUser.id + "&Type=2"
      })
        .then(function (response) {
          if (response.data.items.length > 0) {
            // 循环判断是否有通过的认证请求，获取number
            response.data.items.forEach((element) => {
              if (element.status === 2) {
                that.useRecord.driverLicense = element.number
              }
            })
          }

          that.queryFanceRule()
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    commit() {
      let that = this;
      this.$axios({
        method: Api.useRecord.post_useRecord.method,
        url: Api.useRecord.post_useRecord.url,
        data: this.useRecord,
      })
        .then(function () {
          Toast.success("申请成功");
          that.$router.push("/carUsage");
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    addProp(list, text, value) {
      if (list === null && list === undefined && list.length === 0) {
        return;
      }
      for (let i = 0; i < list.length; i++) {
        const element = list[i];
        element[text] = element[value];
      }
      return list;
    }
  },
};
</script>

<style scoped>
</style>
